<script setup>
import { onMounted, ref } from "vue";
import {getFriends, DeleteFriend, friendsRequestList, AcceptFriendRequest, RejectFriendRequest} from "@/api/index.js";
import { ElMessage, ElMessageBox } from 'element-plus';

const friends = ref([]);

const fetchFriends = async () => {
  try {
    const res = await getFriends();
    friends.value = res;
  } catch (error) {
    console.error('Error fetching friends:', error);
  }
};

const removeFriend = async (friendId) => {
  try {
    await ElMessageBox.confirm('你确定删除此好友吗?', 'Warning', {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning',
    });
    const res = await DeleteFriend(friendId);
    console.log(res.status)
    friends.value = friends.value.filter(friend => friend.friend !== friendId);
    ElMessage.success('成功删除该好友');
  } catch (error) {
  ElMessage.error('删除好友失败');
  }
};


onMounted(fetchFriends);
const friends_applying = ref([])
const fetchApplying = async()=>{
  try {
    const res = await friendsRequestList();
    friends_applying.value = res;
  } catch (error) {
    console.error('Error fetching friends:', error);
  }
}
onMounted(fetchApplying);

const handleAcceptFriendRequest = async (friendId)=>{

  try {
    const res = await AcceptFriendRequest(friendId);
    friends_applying.value = friends_applying.value.filter(friend_applying => friend_applying.requester !== friendId); //移除当前id请求
    await fetchFriends()
    ElMessage.success(res.message);
  } catch (error) {
    console.log(error)
  }
}
const handleRejectFriendRequest = async (friendId) => {
  try {
    await ElMessageBox.confirm('你确定拒绝此此好友申请吗?错过了就再也找不回来了哦！', 'Warning', {
      confirmButtonText: '拒绝',
      cancelButtonText: '取消',
      type: 'warning',
    });

    await RejectFriendRequest(friendId);
    friends_applying.value = friends_applying.value.filter(friend_applying => friend_applying.requester !== friendId);
    ElMessage.success('成功拒绝此好友申请');
  } catch (error) {
    if (error === 'cancel') {
      ElMessage.info('取消拒绝此好友申请');
    } else {
      console.error('Error deleting friend:', error);
      ElMessage.error('拒绝好友失败');
    }
  }
};


</script>

<template>
  <div class="friends-list">
  <div class="friend-list-already">
    <h1>朋友列表</h1>
    <el-table :data="friends" style="width: 100%"  v-if="friends.length">
      <el-table-column prop="user_details.avatar" label="头像" width="200">
        <template #default="{ row }">
          <img :src="row.user_details.avatar ? '/aps/' + row.user_details.avatar : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'" alt="Avatar" class="avatar"/>
        </template>
      </el-table-column>
      <el-table-column prop="friend_username" label="用户名" />
      <el-table-column label="操作" width="120">
        <template #default="{ row }">
          <el-button @click="removeFriend(row.friend)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <p v-if="!friends.length">你还没有任何朋友哦！去聊天室寻找你的朋友吧！</p>
  </div>
  <div class="friend-list-applying">
    <h1>申请信息</h1>
    <el-table :data="friends_applying" style="width: 100%" v-if="friends_applying.length">
      <el-table-column prop="user_details.avatar" label="头像" width="200">
        <template #default="{ row }">
          <img :src="row.user_details.avatar ? '/aps/' + row.user_details.avatar : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'" alt="Avatar" class="avatar"/>
        </template>
      </el-table-column>
      <el-table-column prop="requester_username" label="用户名" />
      <el-table-column label="操作" width="120">
        <template #default="{ row }">
          <el-button @click="handleAcceptFriendRequest(row.requester)" type="success" size="small">同意</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="{ row }">
          <el-button @click="handleRejectFriendRequest(row.requester)" type="danger" size="small">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>
    <p v-if="!friends_applying.length">暂未有任何朋友申请</p>
  </div>
  </div>
</template>

<style scoped lang="less">
.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}
.friends-list{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>
